<template>
  <div>
    <el-card>
      <el-row>
        <el-col align="right">
          <el-form :inline="true"  class="demo-form-inline">
            <el-form-item label="">
              <el-input v-model.lazy="searchvalue"
                        clearable
                        @input="bindInput"
                        :placeholder="$t('searchPlaceholder')" />
            </el-form-item>
            <el-form-item>
              <el-button @click="getList"  icon="el-icon-search" type="primary">
                {{ $t('tableBtn.search') }}
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="add" icon="el-icon-circle-plus-outline"
                         type="success">
                {{ $t('tableBtn.add') }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-table
          border
          tooltip-effect="dark"
          :data="list"
          style="width: 100%">
        <el-table-column
            prop="visitorName"
            label="咨询者姓名"
            width="100"
            align="center">
        </el-table-column>
        <el-table-column
            prop="telephone"
            align="center"
            width="120"
            show-overflow-tooltip
            label="手机号">
          <template slot-scope="{row}">
            <el-tooltip placement="top" content="点击拨打号码" effect="dark">
              <el-link :href="'tel:'+row.telephone">
                {{ row.telephone }}
              </el-link>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
            prop="sex"
            align="center"
            label="性别">
        </el-table-column>
        <el-table-column
            prop="qq"
            align="center"
            show-overflow-tooltip
            label="QQ">
        </el-table-column>
        <el-table-column
            prop="askCourse"
            align="center"
            show-overflow-tooltip
            label="咨询课程">
        </el-table-column>
        <el-table-column
            prop="grade"
            align="center"
            show-overflow-tooltip
            label="学历">
        </el-table-column>
        <el-table-column
            prop="price"
            align="center"
            show-overflow-tooltip
            label="价格">
        </el-table-column>
        <el-table-column
            prop="genPeople"
            align="center"
            label="创量人">
        </el-table-column>
        <el-table-column
            prop="recallAmount"
            align="center"
            label="回放次数">
        </el-table-column>
        <el-table-column
            prop="visitorType"
            align="center"
            label="访客类型">
        </el-table-column>
        <el-table-column
            show-overflow-tooltip
            prop="comment"
            align="center"
            label="备注">
        </el-table-column>
        <el-table-column
            align="center"
            width="250"
            label="操作">
          <template slot-scope="{ row }">
            <el-button @click="bianji(row)" type="primary" size="mini">
              {{ $t('tableBtn.edit') }}
            </el-button>
            <el-button @click="del(row.id)" type="danger" size="mini">
              {{ $t('tableBtn.del') }}
            </el-button>
            <el-button @click="hui(row)" type="success" size="mini">
              回访
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col align="right">
        <el-row style="margin: 15px">
          <el-pagination
              background
              @current-change="currentChange"
              :current-page="page"
              :page-size="10"
              layout="total,prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </el-row>
      </el-col>
    </el-card>
    <el-dialog width="65%" @close="dialogClose" :visible.sync="dialogFormVisible">
      <el-form inline ref="form" :model="form"  >
        <el-form-item label="首咨询时间" prop="name" label-width="100px">
          <el-date-picker
              type="datetime"
              v-model="form.firstAskDate"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="咨询者姓名" prop="name" label-width="100px">
          <el-input v-model="form.visitorName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" prop="name" label-width="100px">
          <el-radio-group v-model="form.sex">
            <el-radio :label="0">未知</el-radio>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="来源类型" prop="name" label-width="100px">
          <el-radio-group v-model="form.contactType">
            <el-radio :label="0">移动端</el-radio>
            <el-radio :label="1">PC</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号码" prop="telephone" label-width="100px">
          <el-input v-model="form.telephone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="QQ" prop="password" label-width="100px">
          <el-input v-model="form.qq" autocomplete="off" />
        </el-form-item>
        <el-form-item label="咨询课程" prop="password" label-width="100px">
          <el-select v-model="form.jobId" placeholder="请选择">
            <el-option
                v-for="item in job"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学历" prop="departId" label-width="100px">
          <el-select @change="departChange" v-model="form.grade" placeholder="请选择">
            <el-option
                v-for="item in depart"
                :key="item.id"
                :label="item.departmentName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="创量人" prop="password" label-width="100px">
           <h4 style="width: 200px">{{ form.genPeople }}</h4>
        </el-form-item>
        <el-form-item label="工作情况" prop="password" label-width="100px">
          <el-input v-model="form.status" autocomplete="off" />
        </el-form-item>

        <el-form-item label="预约回访" prop="companyId" label-width="100px">
          <el-date-picker
              v-model="form.recallDate"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="所在区域" prop="jobId" label-width="100px">
          <el-cascader
              size="large"
              :options="options"
              v-model="form.city"
              @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="备注/聊天" prop="password" label-width="100px">
          <el-input v-model="form.comment" type="textarea" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog width="65%" :visible.sync="huifangdialogFormVisible">
      <el-form  :model="huifang"  >
        <el-form-item label="备注/聊天">
          <el-input
              type="textarea"
              :rows="4"
              v-model="huifang.detail"
              placeholder="请输入内容">
          </el-input>
        </el-form-item>
        <el-form-item>
          <div><input @change="selectImg" type="file" /></div>
          <el-image
              v-show="img"
              style="width: 200px;"
              :src="img"
              :preview-src-list="[img]">
          </el-image>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="huifangdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="shui">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { regionData } from 'element-china-area-data'

import { getDefault } from "./data";
import {getCompany, getCompanyView, getJob} from "../../api";
import {delCustomer, getCustomer,addCustomer} from "../../api/customer";
import { addRecall } from "../../api/recall";

const getDefaultHui = () => ({
  companyId:"",
  detail:"",
  empId:"",
  files:"",
  recordId:""
})

export default {
  data() {
    return {
      list:[],
      searchvalue:"", // 用来绑定用户输入的关键字
      page:1, // 当前页码
      total:0,// 总条数
      dialogFormVisible:false,
      form:getDefault(),
      company:[],
      depart:[],
      job:[],
      options: regionData,
      selectedOptions: [],
      huifang:getDefaultHui(),
      img:"",
      huifangdialogFormVisible:false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleChange (value) {
      console.log(value)
    },
    // 加载数据函数
    getList(){
      getCustomer({
        visitorname:this.searchvalue,
        page:this.page
      }).then(res=>{
        this.list = res.list
        this.total = res.total
        this.page = res.pageNum
      })
    },
    // 初始化表单选项下啦参数
    async formInitOptions(){
      const cp = await getCompany({
        limit:10000
      })
      this.company = cp.list
    },
    // 分页切换
    currentChange(ps){
      this.page = ps
      this.getList()
    },
    bindInput(){
      if (this.searchvalue===''){
        this.getList()
      }
    },
    add(){
      this.dialogFormVisible = true
    },
    // 关闭表达清空
    dialogClose(){
      this.form = getDefault()
      this.$refs.form.resetFields()
    },
    // 选择公司获取公司部门
    async changeCompany(v){
      this.form.departId = ''
      this.form.jobId = ''
      this.depart = await getCompanyView(v)
    },
    // 选择部门获取职位
    async departChange(v){
      this.form.jobId = ''
      const res = await getJob({limit:10000})
      this.job = res.list
    },
    del(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delCustomer(id)
        this.$message.success('删除成功！！！')
        await this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    submit(){
      console.log(this.form)
      addCustomer(this.form).then(res=>{
        console.log(res)
      })
    },
    hui(row){
      console.log(row)
      this.huifang.companyId = row.companyId
      this.huifang.empId = row.employeeId
      this.huifang.recordId = row.regEmpId
      this.huifangdialogFormVisible = true
    },
    async shui(){
      const f = new FormData()
      for (const key in this.huifang) {
        f.append(key,this.huifang[key])
      }
      f.append('time',"2021-12-24 14:00 23")
      await addRecall(f)
      this.$message.success('操作成功！')
      this.huifang = getDefaultHui()
      this.img = ""
    },
    selectImg(e){
      const file = e.target.files[0]
      if (file.type.includes('image')){
        this.huifang.files = file
        this.imgBase(file)
      }else {
        this.$message.warning('请选择图片类型！')
      }
    },
    imgBase(file){
      const r = new FileReader()
      r.readAsDataURL(file)
      r.onload = ()=> this.img = r.result
    }

  }
}
</script>

<style scoped>

</style>
